<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Drag - Interaction Groups</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Drag - Interaction Groups</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example shows a simple drag interaction that doesn't require a drop interaction.</p>
</div>

<div class="example">
    <style>
    .slot {
        border: 2px solid #808080;
        background-color: #CDCDCD;
        color: #666666;
        text-align: center;
        position: relative;
        float: left;
        margin: 4px;
        width: 60px;
        height: 60px;
        z-index: 0;
}
.player {
        border: 2px solid #808080;
        color: #ffffff;
        text-align: center;
        position: relative;
        float: left;
        margin: 4px;
        width: 60px;
        height: 60px;
        top: 150px;
        z-index: 1;
        cursor: move;
}
#pt1 {
        clear: both;
}
.bottom {
        top: 50px;
}

#pt1, #pt2 {
        background-color: #71241A;
}
#pb1, #pb2 {
        background-color: #004C6D;
}

#pboth1, #pboth2 {
        background-color: #FFA928;
}

#workarea {
        position: relative;
        height: 300px;
        width: 500px;
}
#workarea .yui3-dd-drop-active-valid {
        border: 2px solid green;
}
#workarea .yui3-dd-drop-over {
        background-color: green;
}
#workarea .yui3-dd-drop-active-invalid {
        border: 2px solid red;
}

</style>

<div id="workarea">
        <div class="slot" id="t1">1</div>
        <div class="slot bottom" id="b1">3</div>
        <div class="slot bottom" id="b2">4</div>
        <div class="slot bottom" id="b3">5</div>
        <div class="slot bottom" id="b4">6</div>
        <div class="slot" id="t2">2</div>
        <div class="player" id="pt1">1</div>
        <div class="player" id="pt2">2</div>
        <div class="player" id="pb1">3</div>
        <div class="player" id="pb2">4</div>
        <div class="player" id="pboth1">5</div>
        <div class="player" id="pboth2">6</div>
</div>



<script>
    YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
    
        var slots = Y.one('#workarea').all('.slot');
        Y.each(slots, function(v, k) {
            var id = v.get('id'), groups = ['two'];
            switch (id) {
                case 't1':
                case 't2':
                    groups = ['one'];
                    break;
            }
            var drop = new Y.DD.Drop({
                node: v,
                groups: groups
            });
        });

        var players = Y.one('#workarea').all('.player');
        Y.each(players, function(v, k) {
            var id = v.get('id'), groups = ['one', 'two'];
            switch (id) {
                case 'pt1':
                case 'pt2':
                    groups = ['one'];
                    break;
                case 'pb1':
                case 'pb2':
                    groups = ['two'];
                    break;
            }
            var drag = new Y.DD.Drag({
                node: v,
                groups: groups,
                dragMode: 'intersect'
            }).plug(Y.Plugin.DDProxy, {
                moveOnEnd: false
            }).plug(Y.Plugin.DDConstrained, {
                constrain2node: '#workarea'
            });
            drag.on('drag:start', function() {
                var p = this.get('dragNode'),
                    n = this.get('node');
                    n.setStyle('opacity', .25);
                    if (!this._playerStart) {
                        this._playerStart = this.nodeXY;
                    }
                p.set('innerHTML', n.get('innerHTML'));
                p.setStyles({
                    backgroundColor: n.getStyle('backgroundColor'),
                    color: n.getStyle('color'),
                    opacity: .65
                });
            });
            drag.on('drag:end', function() {
                var n = this.get('node');
                n.setStyle('opacity', '1');
            });
            drag.on('drag:drophit', function(e) {
                var xy = e.drop.get('node').getXY();
                this.get('node').setXY(xy, Y.UA.ie);
            });
            drag.on('drag:dropmiss', function(e) {
                if (this._playerStart) {
                    this.get('node').setXY(this._playerStart, Y.UA.ie);
                    this._playerStart = null;
                }
            });
        });
});


</script>

</div>

<h3 id="setting-up-the-work-area">Setting up the Work Area</h3>
<p>First we need to create the work area, players (drags) and slots (drops).</p>

<pre class="code prettyprint">&lt;div id=&quot;workarea&quot;&gt;
    &lt;div class=&quot;slot&quot; id=&quot;t1&quot;&gt;1&lt;&#x2F;div&gt;
    &lt;div class=&quot;slot bottom&quot; id=&quot;b1&quot;&gt;3&lt;&#x2F;div&gt;
    &lt;div class=&quot;slot bottom&quot; id=&quot;b2&quot;&gt;4&lt;&#x2F;div&gt;
    &lt;div class=&quot;slot bottom&quot; id=&quot;b3&quot;&gt;5&lt;&#x2F;div&gt;
    &lt;div class=&quot;slot bottom&quot; id=&quot;b4&quot;&gt;6&lt;&#x2F;div&gt;
    &lt;div class=&quot;slot&quot; id=&quot;t2&quot;&gt;2&lt;&#x2F;div&gt;
    &lt;div class=&quot;player&quot; id=&quot;pt1&quot;&gt;1&lt;&#x2F;div&gt;
    &lt;div class=&quot;player&quot; id=&quot;pt2&quot;&gt;2&lt;&#x2F;div&gt;
    &lt;div class=&quot;player&quot; id=&quot;pb1&quot;&gt;3&lt;&#x2F;div&gt;
    &lt;div class=&quot;player&quot; id=&quot;pb2&quot;&gt;4&lt;&#x2F;div&gt;
    &lt;div class=&quot;player&quot; id=&quot;pboth1&quot;&gt;5&lt;&#x2F;div&gt;
    &lt;div class=&quot;player&quot; id=&quot;pboth2&quot;&gt;6&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<p>Now we give them some CSS to make them visible.</p>

<pre class="code prettyprint">.slot {
    border: 2px solid #808080;
    background-color: #CDCDCD;
    color: #666666;
    text-align: center;
    position: relative;
    float: left;
    margin: 4px;
    width: 60px;
    height: 60px;
    z-index: 0;
}
.player {
    border: 2px solid #808080;
    color: #ffffff;
    text-align: center;
    position: relative;
    float: left;
    margin: 4px;
    width: 60px;
    height: 60px;
    top: 150px;
    z-index: 1;
    cursor: move;
}
#pt1 {
    clear: both;
}
.bottom {
    top: 50px;
}

#pt1, #pt2 {
    background-color: #71241A;
}
#pb1, #pb2 {
    background-color: #004C6D;
}

#pboth1, #pboth2 {
    background-color: #FFA928;
}

#workarea {
    position: relative;
    height: 300px;
    width: 500px;
}
#workarea .yui3-dd-drop-active-valid {
    border: 2px solid green;
}
#workarea .yui3-dd-drop-over {
    background-color: green;
}
#workarea .yui3-dd-drop-active-invalid {
    border: 2px solid red;
}</pre>


<h4 id="setting-up-the-yui-instance">Setting up the YUI Instance</h4>
<p>Now we need to create our YUI instance and tell it to load the <code>dd-drop</code>, <code>dd-proxy</code> and <code>dd-constrain</code> modules.</p>

<pre class="code prettyprint">YUI().use(&#x27;dd-drop&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-constrain&#x27;);</pre>


<h4 id="setting-up-the-drop-targets">Setting up the Drop Targets</h4>
<p>Now that we have a YUI instance with the requested modules, we are going to create our Drop Targets.</p>

<pre class="code prettyprint">YUI().use(&#x27;dd-drop&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-constrain&#x27;, function(Y) {
    &#x2F;&#x2F;Get all the nodes with the class of .slot under #workarea
    var slots = Y.one(&#x27;#workarea&#x27;).all(&#x27;.slot&#x27;);
    &#x2F;&#x2F;Loop through them
    Y.each(slots, function(v, k) {
        var id = v.get(&#x27;id&#x27;), groups = [&#x27;two&#x27;];
        &#x2F;&#x2F;Assign them to different groups
        switch (id) {
            case &#x27;t1&#x27;:
            case &#x27;t2&#x27;:
                groups = [&#x27;one&#x27;];
                break;
        }
        &#x2F;&#x2F;Create the Drop object
        var drop = new Y.DD.Drop({
            node: v,
            &#x2F;&#x2F;With the new groups array as a config option
            groups: groups
        });
    });
});</pre>


<h4 id="setting-up-the-drag-nodes">Setting up the Drag Nodes</h4>
<p>Now we need to create the Drag Nodes and assign them to the proper group.</p>

<pre class="code prettyprint">YUI().use(&#x27;dd-drop&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-constrain&#x27;, function(Y) {
    &#x2F;&#x2F;Snipped
    var players = Y.one(&#x27;#workarea&#x27;).all(&#x27;.player&#x27;);
    Y.each(players, function(v, k) {
        var id = v.get(&#x27;id&#x27;), groups = [&#x27;one&#x27;, &#x27;two&#x27;];
        switch (id) {
            case &#x27;pt1&#x27;:
            case &#x27;pt2&#x27;:
                groups = [&#x27;one&#x27;];
                break;
            case &#x27;pb1&#x27;:
            case &#x27;pb2&#x27;:
                groups = [&#x27;two&#x27;];
                break;
        }
        var drag = new Y.DD.Drag({
            node: v,
            &#x2F;&#x2F;Assign the Groups
            groups: groups,
            &#x2F;&#x2F;Use Intersect Mode for the Target Calculations
            dragMode: &#x27;intersect&#x27;,
        }).plug(Y.Plugin.DDProxy, {
            &#x2F;&#x2F;We don&#x27;t want the node to move on end drag
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            &#x2F;&#x2F;Keep me inside the workarea
            constrain2node: &#x27;#workarea&#x27;
        });
});</pre>


<h4 id="handling-the-drops-and-moments">Handling the Drops and Moments</h4>
<p>Now we are going to listen for the following Drag Events: <code>drag:start, drag:end, drag:drophit, drag:dropmiss</code></p>

<pre class="code prettyprint">drag.on(&#x27;drag:start&#x27;, function() {
    &#x2F;&#x2F;In this event we setup some styles to make the nodes look pretty
    var p = this.get(&#x27;dragNode&#x27;),
        n = this.get(&#x27;node&#x27;);
        n.setStyle(&#x27;opacity&#x27;, .25);
        if (!this._playerStart) {
            this._playerStart = this.nodeXY;
        }
    &#x2F;&#x2F;Put the Drag&#x27;s HTML inside the proxy
    p.set(&#x27;innerHTML&#x27;, n.get(&#x27;innerHTML&#x27;));
    &#x2F;&#x2F;set some styles on the proxy
    p.setStyles({
        backgroundColor: n.getStyle(&#x27;backgroundColor&#x27;),
        color: n.getStyle(&#x27;color&#x27;),
        opacity: .65
    });
});
drag.on(&#x27;drag:end&#x27;, function() {
    &#x2F;&#x2F;Undo some of the styles from the start
    var n = this.get(&#x27;node&#x27;);
    n.setStyle(&#x27;opacity&#x27;, &#x27;1&#x27;);
});
drag.on(&#x27;drag:drophit&#x27;, function(e) {
    &#x2F;&#x2F;If we drop on a target, move to its position
    var xy = e.drop.get(&#x27;node&#x27;).getXY();
    this.get(&#x27;node&#x27;).setXY(xy);
});
drag.on(&#x27;drag:dropmiss&#x27;, function(e) {
    &#x2F;&#x2F;If we miss a target, move back to our start position
    if (this._playerStart) {
        this.get(&#x27;node&#x27;).setXY(this._playerStart);
        this._playerStart = null;
    }
});</pre>


<h4 id="full-javascript-code">Full Javascript Code</h4>
<pre class="code prettyprint">YUI().use(&#x27;dd-drop&#x27;, &#x27;dd-proxy&#x27;, &#x27;dd-constrain&#x27;, function(Y) {

    var slots = Y.one(&#x27;#workarea&#x27;).all(&#x27;.slot&#x27;);
    Y.each(slots, function(v, k) {
        var id = v.get(&#x27;id&#x27;), groups = [&#x27;two&#x27;];
        switch (id) {
            case &#x27;t1&#x27;:
            case &#x27;t2&#x27;:
                groups = [&#x27;one&#x27;];
                break;
        }
        var drop = new Y.DD.Drop({
            node: v,
            groups: groups
        });
    });

    var players = Y.one(&#x27;#workarea&#x27;).all(&#x27;.player&#x27;);
    Y.each(players, function(v, k) {
        var id = v.get(&#x27;id&#x27;), groups = [&#x27;one&#x27;, &#x27;two&#x27;];
        switch (id) {
            case &#x27;pt1&#x27;:
            case &#x27;pt2&#x27;:
                groups = [&#x27;one&#x27;];
                break;
            case &#x27;pb1&#x27;:
            case &#x27;pb2&#x27;:
                groups = [&#x27;two&#x27;];
                break;
        }
        var drag = new Y.DD.Drag({
            node: v,
            groups: groups,
            dragMode: &#x27;intersect&#x27;
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: &#x27;#workarea&#x27;
        });
        drag.on(&#x27;drag:start&#x27;, function() {
            var p = this.get(&#x27;dragNode&#x27;),
                n = this.get(&#x27;node&#x27;);
                n.setStyle(&#x27;opacity&#x27;, .25);
                if (!this._playerStart) {
                    this._playerStart = this.nodeXY;
                }
            p.set(&#x27;innerHTML&#x27;, n.get(&#x27;innerHTML&#x27;));
            p.setStyles({
                backgroundColor: n.getStyle(&#x27;backgroundColor&#x27;),
                color: n.getStyle(&#x27;color&#x27;),
                opacity: .65
            });
        });
        drag.on(&#x27;drag:end&#x27;, function() {
            var n = this.get(&#x27;node&#x27;);
            n.setStyle(&#x27;opacity&#x27;, &#x27;1&#x27;);
        });
        drag.on(&#x27;drag:drophit&#x27;, function(e) {
            var xy = e.drop.get(&#x27;node&#x27;).getXY();
            this.get(&#x27;node&#x27;).setXY(xy, Y.UA.ie);
        });
        drag.on(&#x27;drag:dropmiss&#x27;, function(e) {
            if (this._playerStart) {
                this.get(&#x27;node&#x27;).setXY(this._playerStart, Y.UA.ie);
                this._playerStart = null;
            }
        });
    });
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#setting-up-the-work-area">Setting up the Work Area</a>
<ul class="toc">
<li>
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
</li>
<li>
<a href="#setting-up-the-drop-targets">Setting up the Drop Targets</a>
</li>
<li>
<a href="#setting-up-the-drag-nodes">Setting up the Drag Nodes</a>
</li>
<li>
<a href="#handling-the-drops-and-moments">Handling the Drops and Moments</a>
</li>
<li>
<a href="#full-javascript-code">Full Javascript Code</a>
</li>
</ul>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="simple-drag.html">Simple Drag</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to apply the Drag Plugin to a node.">
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="proxy-drag.html">Drag - Proxy</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using interaction groups, this example demonstrates how to tie into the Drag &amp; Drop Utility&#x27;s interesting moments to provide visual affordances for the current drag operation.">
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
                                        <a href="shim-drag.html">Using the Drag Shim</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use the Drop Target events to code your application.">
                                        <a href="drop-code.html">Using Drop Based Coding</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
                                        <a href="winscroll.html">Window Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
                                        <a href="delegate.html">Drag Delegation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to make an animated node a Drop target.">
                                        <a href="anim-drop.html">Animated Drop Targets</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
